<template>
  <div class="gossip-wrap">
    <NavBarVue :title="title" />
    <div class="content-top gossip-publish">
      <!--内容-->
      <p>
        <van-field
          v-model="content"
          rows="10"
          autosize
          show-word-limit
          type="textarea"
          placeholder="来匿名吐个槽吧，爆个料吧~"
          style="font-size: 16px; color: #333"
          maxlength="500"
        />
      </p>

      <!--话题圈-->
      <dl>
        <dt>选择话题类别</dt>
        <dd>
          <span
            :class="{ active: type === '职场爆料' }"
            @click="type = '职场爆料'"
            >职场爆料</span
          >
          <span
            :class="{ active: type === '大厂热议' }"
            @click="type = '大厂热议'"
            >大厂热议</span
          >
          <span
            :class="{ active: type === '嘉兴校招' }"
            @click="type = '嘉兴校招'"
            >嘉兴校招</span
          >
          <span
            :class="{ active: type === '求职秘籍' }"
            @click="type = '求职秘籍'"
            >求职秘籍</span
          >
          <span
            :class="{ active: type === '求职面试' }"
            @click="type = '求职面试'"
            >求职面试</span
          >
          <span :class="{ active: type === '其他' }" @click="type = '其他'"
            >其他</span
          >
        </dd>
      </dl>

      <!-- 发布按钮 -->
      <div style="padding: 20px 15px">
        <van-button
          type="primary"
          block
          color="#f70"
          round
          style="font-size: 18px"
          text="发布"
          :disabled="disable_submit"
          :loading="loading_submit"
          @click="onSubmit"
        ></van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { Field, Button, Toast } from "vant";
import { PublishBaGua } from "@/util/http";
import Global from "@/Global";

export default {
  name: "BaGuaPublish",
  components: {
    NavBarVue,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      type: "职场爆料",
      content: "",
      loading_submit: false,
    };
  },
  computed: {
    disable_submit() {
      if (this.content.trim().length > 0) return false;
      return true;
    },
  },
  // 方法集合
  methods: {
    onSubmit() {
      this.loading_submit = true;
      PublishBaGua(this.type, this.content).then((res) => {
        this.loading_submit = false;
        Toast(res.msg);
        if (res.result === 1) {
          setTimeout(() => {
            this.$router.go(-1);
          }, Global.setTimeout_time);
        }
      });
    },
  },
};
</script>

<style scoped>
@import "./bagua.css";
</style>
